<template>
  <div class="HB-box">
    <div v-show="component.title" class="HB-box-title">
      {{ component.title }}
    </div>
    <hzx-border v-if="component.border ==='b-type8'" :type="component.border" />
    <div
      :class="{'HB-box-content':true,'dom-touchable':component.component && !isBg}"
    >
      <hzx-border v-if="component.border ==='b-type13'" :type="component.border" />
      <Component :is="component.type" :id="component.id" :key="component.component" :name="component.component" :config="component.config || {}" />
    </div>
  </div>
</template>

<script>
import Chart from '@/components/Charts'
import Map from '@/components/Maps'
import Other from '@/components/Others'
import Three from '@/components/Threes'
export default {
  name: 'Box',
  components: {
    Chart,
    Map,
    Other,
    Three
  },
  props: {
    component: {
      type: Object,
      default: () => {}
    },
    isBg: {
      type: Boolean,
      default: false
    }
  },
  mounted() {
  }
}
</script>

<style scoped>

</style>
